import { defineComponent, ref, nextTick, provide } from 'vue'
import {
  zhCN,
  enUS,
  dateZhCN,
  dateEnUS,
  NConfigProvider,
  NMessageProvider,
  NDialogProvider
} from 'naive-ui'
import { useLocalesStore } from '@/store/locales/locales'
import { useI18n } from 'vue-i18n'

const App = defineComponent({
  name: 'App',
  setup() {
    const isRouterAlive = ref(true)
    const localesStore = useLocalesStore()
    /*refresh page when router params change*/
    const reload = () => {
      isRouterAlive.value = false
      nextTick(() => {
        isRouterAlive.value = true
      })
    }

    provide('reload', reload)
    return {
      reload,
      isRouterAlive,
      localesStore
    }
  },
  render() {
    return (
      <NConfigProvider
        theme={null}
        theme-overrides={null}
        style={{ width: '100%', height: '100vh' }}
        date-locale={
          String(this.localesStore.getLocales) === 'zh_CN' ? dateZhCN : dateEnUS
        }
        locale={String(this.localesStore.getLocales) === 'zh_CN' ? zhCN : enUS}
      >
        <NMessageProvider>
          <NDialogProvider>
            {this.isRouterAlive ? <router-view /> : ''}
          </NDialogProvider>
        </NMessageProvider>
      </NConfigProvider>
    )
  }
})

export default App
